<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>掘金——login</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://gold-cdn.xitu.io/ionicons/2.0.1/css/ionicons.min.css">

    <style>
        .ion-close-round:before,
        {
            display: inline-block;
            font-family: "Ionicons";
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            text-rendering: auto;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            font-size: 12px;
            background-color: #f4f5f5;
        }
        
        body {
            overflow-y: scroll;
            overflow-x: hidden;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        #juejin {
            width: 100%;
            height: 200%;
            position: relative;
        }
        
        .panfish .normal {
            position: absolute;
            top: 0;
            left: 50%;
            width: 10rem;
            -webkit-transform: translate(-50%, -83%);
            transform: translate(-50%, -83%);
        }
        
        .auth-modal-box {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #B3B3B3;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .9;
        }
        
        .auth-form {
            position: relative;
            width: 26.5rem;
            box-sizing: border-box;
            /*border: 1px solid #000;*/
            padding: 2rem;
            background-color: #fff;
        }
        
        .ion-close-round:before {
            content: "\f129";
        }
        
        .close-btn {
            float: right;
            cursor: pointer;
            opacity: .4;
        }
        
        .panel .title {
            margin: 0 0 2rem 0;
        }
        
        .panel .input-box {
            margin-bottom: .8rem;
        }
        
        .panel input {
            padding: 1rem;
            width: 100%;
            outline: none;
            box-sizing: border-box;
            border-radius: 2px;
            border: 1px solid #e9e9e9;
        }
        
        .panel input:focus {
            border-color: #007fff;
        }
        
        .login-btn {
            width: 100%;
            outline: none;
            height: 3.334rem;
            background-color: #007fff;
            border-radius: 2px;
            box-sizing: border-box;
            cursor: pointer;
            border: none;
            color: #fff;
        }
        
        .prompt-box {
            margin: 1rem 0 0;
            color: #8b9196;
        }
        
        .prompt-box span {
            color: #007fff;
            cursor: pointer;
        }
        
        .prompt-box a {
            text-decoration: none;
            float: right;
            color: #007fff;
        }
        
        .oauth-box {
            margin-top: 2.3rem;
            font-size: 1rem;
            line-height: 1.9rem;
            color: #8b9196;
        }
        
        .oauth-box img {
            margin-left: 1.2rem;
            height: 1.9rem;
            vertical-align: bottom;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="juejin">
        <button id="register" class="login-btn">登陆</button>
        <div class="auth-modal-box">
            <form action="" class="auth-form">
                <div class="panfish">
                    <img class="normal" src="https://gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" alt="">
                </div>
                <i data-v-6cb98ece="" title="关闭" class="close-btn ion-close-round"></i>
                <div class="panel">
                    <h1 class="title">登录</h1>
                    <div class="input-group">
                        <div class="input-box">
                            <input type="text" placeholder="邮箱/手机" name="userInput">
                        </div>
                        <div class="input-box">
                            <input type="password" placeholder="密码" name="pwdInput">
                        </div>

                    </div>
                    <button class="login-btn">登录</button>
                    <div class="prompt-box">
                        没有账号？<span>注册</span>
                        <a href="">忘记密码</a>
                    </div>

                </div>
                <div class="oauth-box">
                    第三方账号登陆：
                    <img src="https://gold-cdn.xitu.io/v3/static/img/weibo.fa758eb.svg" alt="weibo">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/wechat.e0ff124.svg" alt="wechat">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/github.547dd8a.svg" alt="github">
                </div>
            </form>
        </div>

    </div>

    <script>
        const imgUrl = {
            normal: 'https://gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png',
            userFocus: 'https://gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png',
            pwdFocus: 'https://gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png'
        },
            shadow = document.querySelector('.auth-modal-box'),
            register = document.getElementById('register'),
            closeBtn = document.querySelector('.close-btn'),
            userInput = document.querySelector('input[name=userInput]'),
            pwdInput = document.querySelector('input[name=pwdInput]'),
            formAvatar = document.querySelector('.panfish img');
        // 隐藏
        userInput.focus();
        function hidden(...obj) {
            obj.forEach(item => {
                item.style.display = 'none';
            })
        }
        // 显示
        function show(...obj) {
            obj.forEach(item => {
                item.style.display = 'flex';
            })
        }

        closeBtn.addEventListener('click', () => {
            hidden(shadow);
        })
        register.addEventListener('click', () => {
            console.log(1);
            show(shadow);
        })
        userInput.addEventListener('focus', () => {
           
            formAvatar.src = imgUrl.userFocus;

        });
        pwdInput.addEventListener('focus', () => {
          
            formAvatar.src = imgUrl.pwdFocus;

        })
        // 两个同时失去焦点的时候
        userInput.addEventListener('blur', () => {
            formAvatar.src = imgUrl.normal;

        });
        pwdInput.addEventListener('blur', () => {
           
            formAvatar.src = imgUrl.normal;

        })
    </script>
</body>

</html>